<template>
<div id="market" class="content-block content">
    <scroller style=""
        :on-refresh="refresh"
        :on-infinite="infinite">
        <!-- content goes here -->
        <search
    @result-click="resultClick"
    @on-change="getResult"
    :results="results"
    v-model="value"
    @on-focus="onFocus"
    @on-cancel="onCancel"
    @on-submit="onSubmit"
    ref="search"></search>
    <div>
    <grid :rows="2">
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>培训</a>
        </div>
      </grid-item>
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>校园二手</a>
        </div>
      </grid-item>
    </grid>
    </div>
    <swiper style="height: 180px; margin-top:10px" loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <divider>热门</divider>
    <grid :rows="3">
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>培训</a>
        </div>
      </grid-item>
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>校园二手</a>
        </div>
      </grid-item>
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>校园二手</a>
        </div>
      </grid-item>
      </grid>
      <divider>最新</divider>
      <grid :rows="2">
        <grid-item>
          <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
            <a class='m-bar'>培训</a>
          </div>
        </grid-item>
        <grid-item>
          <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
            <a class='m-bar'>校园二手</a>
          </div>
        </grid-item>
        </grid-item>
    </grid>
    <div v-for="(item, index) in items" class="row" :class="{'grey-bg': index % 2 == 0}">
        {{ item }}
    </div>
    </scroller>
</div>
</template>

<script>

const baseList = [{
  url: 'javascript:',
  img: 'https://static.vux.li/demo/1.jpg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一次旅行'
}]

const urlList = baseList.map((item, index) => ({
  url: 'http://m.baidu.com',
  img: item.img,
  title: `(可点击)${item.title}`
}))

import { Grid, GridItem, Search, Swiper, Divider } from 'vux'

export default {
  components: {
    Grid,
    GridItem,
    Search,
    Swiper,
    Divider
  },
  data () {
    return {
      items: [],
      demo06_list: urlList
    }
  },
  mounted: function () {
    for (var i = 1; i <= 20; i++) {
      this.items.push(i + ' - keep walking, be 2 with you.')
    }
    this.top = 1
    this.bottom = 20
  },
  methods: {
    refresh: function (done) {
      var self = this
      setTimeout(function () {
        var start = self.top - 1
        for (var i = start; i > start - 10; i--) {
          self.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
        }
        self.top = self.top - 10
        done()
      }, 1500)
    },
    infinite: function (done) {
      var self = this
      setTimeout(function () {
        var start = self.bottom + 1
        for (var i = start; i < start + 10; i++) {
          self.items.push(i + ' - keep walking, be 2 with you.')
        }
        self.bottom = self.bottom + 10
        done()
      }, 1500)
    }
  }
}
</script>

<style scoped>

.weui-grid {
  padding: 0 5px 0 5px !important;
}

.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
.market-category{
  text-align: center;
  background-position: center;
  height: 128px;
  line-height: 128px;
  color: #10c5b6;
  font-weight: bold;
}
.m-bar{
  color: #ff8989;
  border-color: #ff8989;
  border-radius: 4px;
  border: 1px solid;
  padding: 5px 20px 5px 20px;
}
</style>
